<template>
	<div class="bg-white">
		<div class="m-2 shadow rounded">
			<div class="bg-primary p-2 d-flex justify-content-between align-items-center">
				<span class="text-white">基础数据</span>
				<Button @click="submit" type="warning" size="small">保存</Button>
			</div>
			<div class="p-2">
				<Form :label-width="80">
					<Row class="w-100">
						<!-- 门店基本信息开始 -->
						<Col :xxl="6" :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
						<FormItem class="w-50" label="门店名" prop="name">
							<Input v-model="astore.name" placeholder="请输入门店名"></Input>
						</FormItem>
						</Col>

						<Col :xxl="6" :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
						<FormItem class="" label="地址" prop="mddz">
							<Input v-model="astore.mddz" placeholder="请输入地址"></Input>
						</FormItem>
						</Col>
						<Col :xxl="6" :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
						<FormItem class="" label="负责人" prop="fzr">
							<Input v-model="astore.fzr" placeholder="请输入负责人名称"></Input>
						</FormItem>
						</Col>
						<Col :xxl="6" :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
						<FormItem class="" label="联系电话" prop="lxdh">
							<Input v-model="astore.lxdh" placeholder="请输入门店联系电话"></Input>
						</FormItem>
						</Col>
						<Col :xxl="6" :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
						<!-- 提交封面文件 -->
						<FormItem class="" label="封面" prop="cover">
							<div>
								<img :src="astore.cover" />
							</div>
							<div class="p-2">
								<input @change="changeFile($event)" id="mdcover" class="d-none" type="file" />
								<label for="mdcover">
									<span class="btn btn-primary">选择文件</span>
								</label>
							</div>
						</FormItem>
						</Col>
						<!-- <Col :xxl="6" :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
						<FormItem label="门店状态">
							<Select v-model="astore.statu">
								<Option :key="key" :value="item.code" v-for="(item, key) in roomStatus">{{item.value}}
								</Option>
							</Select>
						</FormItem>
						</Col> -->
						<Col :xxl="12" :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
						<FormItem class="" label="描述" prop="ms">
							<Input type="textarea" v-model="astore.ms" placeholder="请输入描述"></Input>
						</FormItem>
						</Col>
					</Row>

					<!-- 省市区下拉框 -->
					<Row class="w-100">
						<Col :xxl="6" :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
						<FormItem class="w-50" label="省">
							<Select v-model="astore.sheng" placeholder="请选择省" @on-change="changeSheng">
								<Option v-for="item in shengs" :key="item.code" :value="item.code">{{ item.label}}
								</Option>
							</Select>
						</FormItem>
						</Col>
						<Col :xxl="6" :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
						<FormItem class="w-50" label="市">
							<Select v-model="astore.shi" placeholder="请选择市" @on-change="changeShi">
								<Option v-for="item in shis" :key="item.code" :value="item.code">{{ item.label}}
								</Option>
							</Select>
						</FormItem>
						</Col>

						<Col :xxl="6" :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
						<FormItem class="w-50" label="区">
							<Select v-model="astore.qu" placeholder="请选择区" @on-change="changeQu">
								<Option v-for="item in qus" :key="item.code" :value="item.code">{{ item.label}}</Option>
							</Select>
						</FormItem>
						</Col>
					</Row>

					<!-- 经纬度显示 -->
					<Row class="w-100">
						<Col>
						<FormItem class="" label="">
							<div>
								<span>纬度：{{astore.wd}}</span>
								<span>/</span>
								<span>经度：{{astore.jd}}</span>
							</div>
							<!-- 创建腾讯地图容器 -->
							<div id="txmap" style="height: 400px" class="w-100 border">
							</div>
						</FormItem>
						</Col>
					</Row>

					<!-- 门店基本信息结束 -->

					<!-- 小程序、商户信息开始 -->
					<Row class="w-100">
						<Col :xxl="8" :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
						<FormItem class="" label="小程序appid" prop="appid">
							<Input v-model="astore.appid"></Input>
						</FormItem>
						</Col>
						<Col :xxl="8" :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
						<FormItem class="" label="小程序秘钥" prop="secretkey">
							<Input v-model="astore.secretkey"></Input>
						</FormItem>
						</Col>
						<Col :xxl="8" :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
						<FormItem class="" label="商户id" prop="nid">
							<Input v-model="astore.nid"></Input>
						</FormItem>
						</Col>
						<Col :xxl="8" :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
						<FormItem class="" label="商户支付证书序列号" prop="zsxlh">
							<Input v-model="astore.zsxlh"></Input>
						</FormItem>
						</Col>
						<Col :xxl="8" :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
						<FormItem class="" label="商户支付私钥" prop="zfsy">
							<Input v-model="astore.zfsy"></Input>
						</FormItem>
						</Col>
						<Col :xxl="8" :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
						<FormItem class="" label="商户支付秘钥3版本" prop="zfv3apikey">
							<Input v-model="astore.zfv3apikey"></Input>
						</FormItem>
						</Col>
						<!-- 小程序、商户信息结束 -->
					</Row>
				</Form>

			</div>
		</div>

	</div>


</template>

<script>
	export default {
		data() {
			return {
				map: undefined,
				markerLayer: undefined,
				astore: {
					name: "", //门店名
					mddz: "", //门店地址
					fzr: "", //负责人
					lxdh: "", //联系电话
					cover: "", //封面
					jd: "39.984120", //经度
					wd: "116.307484", //纬度
					ms: "", //门店描述
					sheng: "", //省
					shi: "", //市
					qu: "", //区

					//actflg: "", //开店状态
					appid: "", //小程序appid
					secretkey: "", //小程序秘钥
					nid: "", //商户id
					zsxlh: "", //商户支付证书序列号
					zfsy: "", //商户支付私钥
					zfv3apikey: "", //商户支付密钥3版本
					imgs: [], //图片数组
				},
				//存放省数组
				shengs: [{
						code: "1",
						label: "黑龙江省"
					},
					{
						code: "2",
						label: "广西省"
					},

				],
				//存放市数组
				shis: [{
						code: "1",
						label: "哈尔滨"
					},
					{
						code: "2",
						label: "绥化市"
					}, {
						code: "3",
						label: "南宁市"
					}, {
						code: "4",
						label: "桂林市"
					},
				],
				//存放区数组
				qus: [{
						code: "1",
						label: "呼兰区"
					},
					{
						code: "2",
						label: "北林区"
					},
					{
						code: "3",
						label: "青秀区"
					},
					{
						code: "4",
						label: "叠彩区"
					},
				],


			}
		},
		created: function() {},

		mounted: function() {
			this.init();
		},

		methods: {
			submit: function() {
				if (this.astore.name === "") {
					this.message.error("请输入门店名");
					return;
				}

				this.message.confirm({
					title: "保存提示",
					content: "即将新增门店，确定吗？",
					onOk: () => {
						this.http.post({
							url: "/store/info",
							data: this.astore
						}).then(res => {
							this.message.info("新增成功");
							this.$tabs.close();
						});
					},
					onCancel: () => {
						this.message.info('操作已取消');
					}
				});
			},


			//初始化地图
			init: function() {
				//定义地图中心点坐标
				//在 TMap 中，构造函数 TMap.LatLng 的参数顺序通常是经度在前，纬度在后
				var center = new TMap.LatLng(parseFloat(this.astore.jd), parseFloat(this.astore.wd))
				//定义map变量，调用 TMap.Map() 构造函数创建地图
				this.map = new TMap.Map(document.getElementById('txmap'), {
					center: center, //设置地图中心点坐标
					zoom: 17.2, //设置地图缩放级别
					pitch: 43.5, //设置俯仰角
					rotation: 45 //设置地图旋转角度
				});
				this.removeMarker();
				this.createMarker();

				//绑定点击事件
				//var self = this;
				this.map.on("click", evt => {
					//lat纬度
					var lat = evt.latLng.getLat().toFixed(6);
					//lng经度
					var lng = evt.latLng.getLng().toFixed(6);
					//更新经纬度
					// self.astore.wd = lat;
					// self.astore.jd = lng;
					this.astore.wd = lat;
					this.astore.jd = lng;
					console.log("纬度：" + this.astore.wd);
					console.log("经度：" + this.astore.jd);
					//调用点标记方法，先删除后添加
					this.removeMarker();
					this.createMarker();

				});
			},

			//添加点标记
			createMarker: function() {
				//根据经纬度参数创建点标记
				let position = new TMap.LatLng(parseFloat(this.astore.jd), parseFloat(this.astore.wd));
				//创建标记层
				console.log("位置：" + position);
				this.markerLayer = new TMap.MultiMarker({
					id: 'marker-layer',
					map: this.map,
					geometries: [{
						"id": 'demo',
						"styleId": 'marker',
						"position": position,
						"properties": {
							"title": "marker"
						}
					}]
				});
				//动态设置地图中心点
				this.map.setCenter(position);
			},

			//删除点标记
			//移除marker事件
			removeMarker: function() {
				if (this.markerLayer) {
					this.markerLayer.setMap(null);
					this.markerLayer = null;
				}
			},



			//请求图片
			changeFile: function(event) {
				console.log(event.target.files);
				if (event.target.files && event.target.files.length > 0) {
					this.loadFile(event.target.files[0]);
				}
			},
			loadFile: function(file) {
				const reader = new FileReader();
				reader.onload = e => {
					const content = e.target.result;
					// 处理文件内容
					// this.$emit("success", content);
					console.log(content);

					this.astore.cover = content;
				};
				reader.onerror = function(e) {
					console.error("读取文件时发生错误:", e.target.error);
				};
				//显示文件
				reader.readAsDataURL(file);


				//上传文件到服务器
				this.http.uploadFile({
					path: "/md/cover/",
					file,
					//上传进度
					onProgress: progressData => {
						console.log(progressData);
					}
				}).then(res => {
					console.log(res);
				});

			},


		},
	}
</script>

<style>
</style>